/**
 * 应用主组件
 * 负责整个应用的布局和路由配置
 * 实现了响应式设计和主题切换功能
 */
import React, { lazy, Suspense, useState, useEffect } from 'react';
import { Layout, App as AntApp, Spin } from 'antd';
import { HashRouter as Router, Routes, Route } from 'react-router-dom';
import Sidebar from './components/layout/Sidebar';
import BackToTopButton from './components/layout/BackToTopButton';
import HomePage from './features/Pages/HomePage';
import { ThemeProvider } from './components/ThemeProvider';
import './styles/themeVariables.css';

/**
 * 懒加载页面组件
 * 使用React的lazy函数实现组件的按需加载，提高应用的初始加载性能
 * 配合Suspense使用，在组件加载过程中显示加载状态
 */
const CaveCalculationPage = lazy(() => import('./features/calculator/cave/CaveCalculationPage'));
const CrossingCalculationPage = lazy(() => import('./features/calculator/crossing/CrossingCalculationPage'));
const SoilWaterConservationPage = lazy(() => import('./features/calculator/soilwaterconservation/SoilWaterConservationPage'));
const TunnelPage = lazy(() => import('./features/calculator/tunnel/TunnelPage'));
const DocumentsPage = lazy(() => import('./features/Pages/DocumentsPage'));
const FileManageCenterPage = lazy(() => import('./features/Pages/FileManageCenter'));
const SettingsPage = lazy(() => import('./features/Pages/SettingsPage'));
const CalculationHistoryPage = lazy(() => import('./features/Pages/CalculationHistoryPage'));
const ToolsPage = lazy(() => import('./features/tools/ToolsPage'));
const ImageCropPage = lazy(() => import('./features/tools/ImageCropPage'));
const FileRenamePage = lazy(() => import('./features/tools/FileRenamePage'));
const DemoPage = lazy(() => import('./demo/DemoPage'));

/**
 * 解构Layout组件以获取Content部分
 */
const { Content } = Layout;

/**
 * 应用主组件实现
 */
const App: React.FC = () => {
  /**
 * 侧边栏折叠状态
 */
  const [collapsed, setCollapsed] = useState(false);

  /**
 * 处理侧边栏折叠事件
 * @param value 折叠状态值
 */
  const handleSidebarCollapse = (value: boolean) => {
    setCollapsed(value);
  };

  return (
    <ThemeProvider>
      <AntApp>
        {/* 将Ant Design的消息API绑定到我们的通知服务 */}
        <NotificationBinder />
        <Router>
          <Layout style={{ minHeight: '100vh' }}>
            {/* 侧边栏组件，接收折叠状态的回调函数 */}
            <Sidebar onCollapse={handleSidebarCollapse} />
            <Layout className="site-layout">
              {/* 内容区域，根据侧边栏折叠状态调整左侧边距 */}
              <Content style={{ 
                /* 调整左侧边距以适应固定定位的侧边栏 */
                margin: `0 30px 0 ${collapsed ? 110 : 280}px`, 
                padding: 24, 
                minHeight: 280,
                transition: 'margin 0.3s ease',
                overflow: 'visible'
              }}>
                {/* 懒加载组件的占位符，显示加载状态 */}
                <Suspense fallback={<Spin size="large" style={{ display: 'block', margin: '20px auto' }} />}>
                  {/* 路由配置，定义应用中所有页面的路径和对应组件 */}
                  <Routes>
                    <Route path="/" element={<HomePage />} /> {/* 首页路由 */}
                    <Route path="/cave-calculation" element={<CaveCalculationPage />} /> {/* 溶洞计算页面 */}
                    <Route path="/crossing-calculation" element={<CrossingCalculationPage />} /> {/* 穿跨越计算页面 */}
                    <Route path="/soil-water-conservation" element={<SoilWaterConservationPage />} /> {/* 水土保持页面 */}
                    <Route path="/tunnel" element={<TunnelPage />} /> {/* 隧道页面 */}
                    <Route path="/tools" element={<ToolsPage />} /> {/* 小工具页面 */}
                    <Route path="/tools/image-crop" element={<ImageCropPage />} /> {/* 图片裁剪页面 */}
                    <Route path="/tools/file-rename" element={<FileRenamePage />} /> {/* 文件重命名页面 */}

                    <Route path="/documents" element={<DocumentsPage />} /> {/* 文档页面 */}
                    <Route path="/file-management" element={<FileManageCenterPage />} /> {/* 文件管理中心页面 - 主路径 */}
                    <Route path="/settings" element={<SettingsPage />} /> {/* 设置页面 */}
                    <Route path="/calculation-history" element={<CalculationHistoryPage />} /> {/* 计算历史页面 */}
                    <Route path="/demo" element={<DemoPage />} /> {/* 演示页面 */}
                  </Routes>
                </Suspense>
              </Content>
            </Layout>
          </Layout>
        </Router>
        {/* 回到顶部按钮组件 */}
        <BackToTopButton />
      </AntApp>
    </ThemeProvider>
  );
};

export default App;

/**
 * 通知绑定组件
 * 负责将Ant Design的消息API绑定到我们的通知服务，实现全局通知功能
 */
import notificationService from './services/notificationService';

const NotificationBinder: React.FC = () => {
  // 获取Ant Design的App实例
  const antdApp = AntApp.useApp();
  
  useEffect(() => {
    try {
      // 检查App实例和message API是否存在，若存在则设置到通知服务
      if (antdApp && antdApp.message) {
        notificationService.setMessageApi(antdApp.message);
      }
    } catch (e) {
      // 静默处理可能的错误，不影响应用运行
    }
  }, [antdApp]);
  
  return null;
};